<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>消息</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        body{
            background: #f3f3f3;
            /*font-size: 14px;*/
        }
        .aui-slide-node .img-item{
            background-size:cover;
            width: 100%;
        }
        .chatrow .aui-img-object{
            width: 30px;
            height: 30px;
        }
        .chatrow .aui-ellipsis-1{
            width: 80%;
        }
    </style>
</head>
<body>
    <div class="contain">
        <div class="slide">
            <div id="aui-slide">
                <div class="aui-slide-wrap" >
                    <div class="aui-slide-node">
                        <div style="width: 100%;height:100%;background-size: cover;background-image: url(../../image/news_header.jpg);"></div>
                    </div>
                    <div class="aui-slide-node">
                        <div style="width: 100%;height:100%;background-size: cover;background-image: url(../../image/news_header.jpg);"></div>
                    </div>
                </div>
                <div class="aui-slide-page-wrap"><!--分页容器--></div>
            </div>
        </div>

        <ul class="aui-list-view aui-in">
            <li class="aui-list-view-cell" tapmode onclick="openToTwo('../friend/newfriend_win')">
                <div class="aui-arrow-right">
                    <i class="aui-iconfont aui-icon-friendaddfill aui-bg-info"></i>新朋友
                    <span class="aui-badge aui-badge-danger message_count sms_user_count" style="display: none;">0</span>
                </div>
            </li>
            <li class="aui-list-view-cell" tapmode onclick="openToTwo('wuliuInfo')">
                <div class="aui-arrow-right">
                    <i class="aui-iconfont aui-icon-deliver aui-bg-success"></i>交易物流消息
                    <span class="aui-badge aui-badge-danger message_count sms_express_count" style="display: none;">0</span>
                </div>
            </li>
        </ul>


        <ul class="aui-list-view" id="message-content" style="display: none;">
        </ul>

    </div>
</body>
<script id="list-template" type="text/x-dot-template">
    {{ for(var i in it){ }}
    <li class="aui-list-view-cell aui-img chatrow" onclick="clearChatCount(this);openchat({{=it[i].senderUserId}},'{{=it[i].isCompany?it[i].userInfo.company.thumb:it[i].userInfo.head_portrait}}','{{=it[i].isCompany?it[i].userInfo.company.company:it[i].userInfo.nickname}}','../',{{=it[i].isCompany}});" data-userid="{{=it[i].senderUserId}}">
        <div class="aui-arrow-right">

            <img class="aui-img-object aui-pull-left" src="{{=it[i].isCompany?it[i].userInfo.company.thumb:it[i].userInfo.head_portrait}}">
            <div class="aui-img-body">
                {{=it[i].isCompany?it[i].userInfo.company.company:it[i].userInfo.nickname}}
                <p class="aui-ellipsis-1">
                {{?it[i].content.title}}
                    [图文消息]
                {{??it[i].content.text}}
                    {{=it[i].content.text}}
                {{??it[i].content.imageUrl}}
                    [图片]
                {{??it[i].content.voicePath}}
                    [语音]
                {{??}}
                    {{=it[i].content}}
                {{?}}
                </p>
            </div>
            <span class="aui-badge aui-badge-danger message_count" style="display:{{?it[i].unreadCount>0}}block{{??}}none{{?}};" >{{=it[i].unreadCount}}</span>
        </div>
    </li>
    {{ } }}
</script>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript">
   var chatUsersInfo;
   var chatUserIds;
   apiready = function() {
       api.parseTapmode();
       var mobile = api.pageParam.mobile;
       var header = $api.dom('header');
       var footer = $api.dom('footer');
       $api.fixIos7Bar(header);

       renderChatContent();
      
        //监听聊天清除消息数
        api.addEventListener({
            name: 'clearChatUserCount'
        }, function(ret, err) {
            if (ret&&ret.value) {
                var targetUserId=ret.value.userId;
                var $targetRow=$('#message-content li[data-userid="'+targetUserId+'"]');
                $targetRow.find('.message_count').text(0).hide();
            } 
        });

         //监听刷新消息
         api.addEventListener({
            name: 'receiveChatMessage'
        }, function(ret, err) {
            renderChatContent();
        });

         //show unread count
        var myInfoData=api.pageParam.myInfoData;
        if(myInfoData){
            if(myInfoData.sms_user_count){
                $('.sms_user_count').show().text(myInfoData.sms_user_count);
            }
            if(myInfoData.sms_express_count){
                $('.sms_express_count').show().text(myInfoData.sms_express_count);
            }
        }

        api.addEventListener({
            name: 'clearMessageCountFriend'
        }, function (ret) {
            $('.sms_user_count').hide().text(0);
        });

        api.addEventListener({
            name: 'clearMessageCountExpress'
        }, function (ret) {
            $('.sms_express_count').hide().text(0);
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret) {
            var totalCount=0;
            $('.message_count').each(function(){
                totalCount+=parseInt($(this).text());
            })
            if(!totalCount>0){
                api.sendEvent({
                    name:'clearMessageCount'
                });
            }
        });

   }

   function renderChatContent(){
       var chatContent=$api.getStorage('chatContent');
       if(chatContent){

        var uids=new Array();
        for(i in chatContent){
            uids.push(chatContent[i].senderUserId);
        }
        ajaxRequest('User/getUsersInfo/userIds/'+uids.join(','), 'get', {}, function (ret, err) {
            if(ret.status==1){
                for(i in ret.msg){
                    for(j in chatContent){
                        if(chatContent[j].senderUserId==ret.msg[i].userid){
                            chatContent[j].userInfo=ret.msg[i];
                        }
                    }
                }
                var tpl = $api.byId('list-template').text;
                var tempFn = doT.template(tpl);
                $('#message-content').show().html(tempFn(chatContent));
            }
        });
    }
   }

   function clearChatCount(obj){
        $(this).find('.message_count').text(0).hide();
   }




   slide();
   // 图片轮播
   function slide(){
        var slide3 = new auiSlide({
            container:document.getElementById("aui-slide"),
            // "width":300,
            "height":120,
            "speed":500,
            "autoPlay": 3000, //自动播放
            "loop":true,
            "pageShow":true,
            "pageStyle":'dot',
            'dotPosition':'center'
        })
   }
</script>
</html>
